<template>
<div class="page" data-name="message-list">
	<div class="navbar">
		<div class="navbar-inner">
			<div class="left">
				<a href="#" class="link back"> <i class="icon icon-back"></i> </a>
			</div>
			<div class="title">在线客服</div>
			<div class="right"></div>
		</div>
	</div>
	<div class="toolbar messagebar">
		<div class="toolbar-inner">
			<div class="messagebar-area">
				<textarea class="resizable" placeholder="Message"></textarea>
			</div>
			<a class="link send-link color-orange" href="#">Send</a>
		</div>
	</div>
	<div class="page-content  messages-content"
		style="padding-bottom: 100px;">

		<div class="messages">
			<!-- Messages title -->
			<div class="messages-title">
				<b>Sunday, Feb 9,</b> 12:58
			</div>
			<!-- Full layout sent message -->
			<div class="message message-sent">
				<div class="message-avatar"
					style="background-image: url(http://lorempixel.com/100/100/people/7);"></div>
				<div class="message-content">
					<div class="message-name">John Doe</div>
					<div class="message-header">Message header</div>
					<div class="message-bubble">
						<div class="message-text-header">Text header</div>
						<div class="message-text">Lorem ipsum dolor sit amet,
							consectetur adipisicing elit.</div>
						<div class="message-text-footer">Text footer</div>
					</div>
					<div class="message-footer">Message footer</div>
				</div>
			</div>
			<!-- Full layout received message -->
			<div class="message message-received">
				<div class="message-avatar"
					style="background-image: url(http://lorempixel.com/100/100/people/7);"></div>
				<div class="message-content">
					<div class="message-name">John Doe</div>
					<div class="message-header">Message header</div>
					<div class="message-bubble">
						<div class="message-text-header">Text header</div>
						<div class="message-text">Lorem ipsum dolor sit amet,
							consectetur adipisicing elit.</div>
						<div class="message-text-footer">Text footer</div>
					</div>
					<div class="message-footer">Message footer</div>
				</div>
			</div>
			
			<div class="message message-sent">
		        <div class="message-content">
		          <div class="message-bubble">
		            <div class="message-image"><img src="http://lorempixel.com/200/260/cats/4/" style="width:200px; height: 260px;"></div>
		          </div>
		        </div>
		     </div>
			
		</div>
	</div>

</div>
</template>


<script>

  
  function messageFunction(){
	  
	// Init Messages
	  var messages = app.messages.create({
	    el: '.messages',

	    // First message rule
	    firstMessageRule: function (message, previousMessage, nextMessage) {
	      // Skip if title
	      if (message.isTitle) return false;
	      /* if:
	        - there is no previous message
	        - or previous message type (send/received) is different
	        - or previous message sender name is different
	      */
	      if (!previousMessage || previousMessage.type !== message.type || previousMessage.name !== message.name) return true;
	      return false;
	    },
	    // Last message rule
	    lastMessageRule: function (message, previousMessage, nextMessage) {
	      // Skip if title
	      if (message.isTitle) return false;
	      /* if:
	        - there is no next message
	        - or next message type (send/received) is different
	        - or next message sender name is different
	      */
	      if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
	      return false;
	    },
	    // Last message rule
	    tailMessageRule: function (message, previousMessage, nextMessage) {
	      // Skip if title
	      if (message.isTitle) return false;
	        /* if (bascially same as lastMessageRule):
	        - there is no next message
	        - or next message type (send/received) is different
	        - or next message sender name is different
	      */
	      if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
	      return false;
	    }
	  });

	  // Init Messagebar
	  var messagebar = app.messagebar.create({
	    el: '.messagebar'
	  });

	  // Response flag
	  var responseInProgress = false;

	  // Send Message
	  $$('.send-link').on('click', function () {
	    var text = messagebar.getValue().replace(/\n/g, '<br>').trim();
	    // return if empty message
	    if (!text.length) return;

	    // Clear area
	    messagebar.clear();

	    // Return focus to area
	    messagebar.focus();

	    // Add message to messages
	    messages.addMessage({
	      text: text,
	    });

	    if (responseInProgress) return;
	    // Receive dummy message
	    receiveMessage();
	  });

	  // Dummy response
	  var answers = [
	    'Yes!',
	    'No',
	    'Hm...',
	    'I am not sure',
	    'And what about you?',
	    'May be ;)',
	    'Lorem ipsum dolor sit amet, consectetur',
	    'What?',
	    'Are you sure?',
	    'Of course',
	    'Need to think about it',
	    'Amazing!!!'
	  ]
	  var people = [
	    {
	      name: 'Kate Johnson',
	      avatar: 'http://lorempixel.com/100/100/people/9'
	    },
	    {
	      name: 'Blue Ninja',
	      avatar: 'http://lorempixel.com/100/100/people/7'
	    }
	  ];
	  function receiveMessage() {
	    responseInProgress = true;
	    setTimeout(function () {
	      // Get random answer and random person
	      var answer = answers[Math.floor(Math.random() * answers.length)];
	      var person = people[Math.floor(Math.random() * people.length)];

	      // Show typing indicator
	      messages.showTyping({
	        header: person.name + ' is typing',
	        avatar: person.avatar
	      });

	      setTimeout(function () {
	        // Add received dummy message
	        messages.addMessage({
	          text: answer,
	          type: 'received',
	          name: person.name,
	          avatar: person.avatar
	        });
	        // Hide typing indicator
	        messages.hideTyping();
	        responseInProgress = false;
	      }, 4000);
	    }, 1000);
	  }
	  
	  
  }
  


  return {
    data: function () {
    	 var lotBatchListResult = [];
      return {
    	  lotBatchList: lotBatchListResult
      };
    },
  	on:{
  		 pageInit: function () {
  	        self = this;
  	        app = self.$app;
  	       
  	      	messageFunction();
  	        
  		 }
  	}
	
  };
</script>
